<script setup>
import { ref, onMounted, watch } from 'vue'

const boardSize = 8
const board = ref([])
const score = ref(0)
const selectedCandy = ref(null)
const colors = ['🔴', '🔵', '🟡', '🟢', '🟣', '🟠']

// 初始化游戏板
const initBoard = () => {
  board.value = Array(boardSize).fill().map(() => 
    Array(boardSize).fill().map(() => 
      colors[Math.floor(Math.random() * colors.length)]
    )
  )
}

// 检查是否有可消除的糖果
const checkMatches = () => {
  let hasMatches = false
  
  // 检查行
  for (let i = 0; i < boardSize; i++) {
    for (let j = 0; j < boardSize - 2; j++) {
      if (board.value[i][j] !== '' &&
          board.value[i][j] === board.value[i][j + 1] &&
          board.value[i][j] === board.value[i][j + 2]) {
        board.value[i][j] = ''
        board.value[i][j + 1] = ''
        board.value[i][j + 2] = ''
        score.value += 30
        hasMatches = true
      }
    }
  }

  // 检查列
  for (let i = 0; i < boardSize - 2; i++) {
    for (let j = 0; j < boardSize; j++) {
      if (board.value[i][j] !== '' &&
          board.value[i][j] === board.value[i + 1][j] &&
          board.value[i][j] === board.value[i + 2][j]) {
        board.value[i][j] = ''
        board.value[i + 1][j] = ''
        board.value[i + 2][j] = ''
        score.value += 30
        hasMatches = true
      }
    }
  }

  return hasMatches
}

// 填充空格
const fillEmptySpaces = () => {
  for (let j = 0; j < boardSize; j++) {
    for (let i = boardSize - 1; i >= 0; i--) {
      if (board.value[i][j] === '') {
        // 向上查找非空糖果
        for (let k = i - 1; k >= 0; k--) {
          if (board.value[k][j] !== '') {
            board.value[i][j] = board.value[k][j]
            board.value[k][j] = ''
            break
          }
        }
      }
    }
  }

  // 填充顶部空格
  for (let i = 0; i < boardSize; i++) {
    for (let j = 0; j < boardSize; j++) {
      if (board.value[i][j] === '') {
        board.value[i][j] = colors[Math.floor(Math.random() * colors.length)]
      }
    }
  }
}

// 处理点击事件
const handleClick = (row, col) => {
  if (!selectedCandy.value) {
    selectedCandy.value = { row, col }
  } else {
    const { row: selectedRow, col: selectedCol } = selectedCandy.value
    
    // 检查是否相邻
    if ((Math.abs(row - selectedRow) === 1 && col === selectedCol) ||
        (Math.abs(col - selectedCol) === 1 && row === selectedRow)) {
      // 交换糖果
      const temp = board.value[row][col]
      board.value[row][col] = board.value[selectedRow][selectedCol]
      board.value[selectedRow][selectedCol] = temp

      // 检查是否形成匹配
      if (!checkMatches()) {
        // 如果没有匹配，换回来
        const temp = board.value[row][col]
        board.value[row][col] = board.value[selectedRow][selectedCol]
        board.value[selectedRow][selectedCol] = temp
      } else {
        // 有匹配，继续检查并填充
        setTimeout(() => {
          fillEmptySpaces()
          while (checkMatches()) {
            fillEmptySpaces()
          }
        }, 300)
      }
    }
    selectedCandy.value = null
  }
}

// 重新开始游戏
const restartGame = () => {
  score.value = 0
  initBoard()
}

onMounted(() => {
  initBoard()
})
</script>

<template>
  <div class="candy-crush">
    <h1>开心消消乐</h1>
    <div class="score">得分: {{ score }}</div>
    <button class="restart-btn" @click="restartGame">重新开始</button>
    
    <div class="game-board">
      <div v-for="(row, i) in board" :key="i" class="row">
        <div 
          v-for="(candy, j) in row" 
          :key="j"
          class="candy"
          :class="{ 
            selected: selectedCandy && 
                     selectedCandy.row === i && 
                     selectedCandy.col === j 
          }"
          @click="handleClick(i, j)"
        >
          {{ candy }}
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.candy-crush {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.score {
  font-size: 24px;
  margin: 10px 0;
}

.restart-btn {
  padding: 10px 20px;
  font-size: 16px;
  margin: 10px 0;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.game-board {
  background: #f0f0f0;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.row {
  display: flex;
}

.candy {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: white;
  margin: 2px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.candy:hover {
  transform: scale(1.1);
}

.candy.selected {
  background: #e0e0e0;
  transform: scale(1.1);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
</style> 